<template>
        <div>
                <Input v-model="filter.title" style="width:260px">                        
                        <Button slot="append" icon="ios-search" @click="search">搜索</Button>                        
                </Input>
                <p style="padding:5px 0"><Button type="primary" @click="addContent">增加内容</Button></p>                
                <Table border :columns="columns" :data="list"></Table>
                <br>
                <Page :total="total" show-total show-elevator show-sizer :page-size="5"  @on-change="onChange" :page-size-opts="[5, 10, 15, 20]" @on-page-size-change="pageChange"></Page>
                <!-- <Page :total="total" show-total @on-change="onChange"></Page> -->
                <!-- 弹框 -->

                <!-- 增加弹框-->
                <Modal
                        v-model="modalAdd"
                        title="增加内容"
                        @on-ok="comfirm">                          
                        <p><Input v-model="addAndUpdata.title" placeholder="新闻标题"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.brief" placeholder="来源"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.author" placeholder="作者"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.cateId" placeholder="所属分类"  clearable style="width: 200px"></Input></p>
                </Modal>

                <!--修改弹框 -->
                <Modal
                        v-model="modal"
                        title="请选择字段名称"
                        @on-ok="ok">
                        <Form ref="formValidate" :model="formValidate" :label-width="80">
                              <FormItem label="" prop="field" style="width:300px">
                                  <Select v-model="formValidate.field" placeholder="选择字段名称">
                                      <Option value="title">新闻标题</Option>
                                      <Option value="brief">来源</Option>
                                      <Option value="author">作者</Option>
                                       <Option value="cateId">所属分类</Option>
                                  </Select>
                              </FormItem>
                              <FormItem label="" prop="content" style="width:300px">
                                  <Input v-model="formValidate.content" placeholder="输入修改内容..."></Input>
                              </FormItem>
                         </Form>
                </Modal>

                  
        </div>        
</template>

<script>
import mix from './mix'
export default {
  mixins:[mix],
  data() {
    return {
      module:'news',
      columns: [
        {
          title: "新闻标题",
          key: "title",
          align: "center"
        },
        {
          title: "来源",
          align: "center",
          key: "brief"
        },
        {
          title: "作者",
          align: "center",
          key: "author"
        },
          {
          title: "所属分类",
          align: "center",
          key: "cateId"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    id: 100
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.update(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                   
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.comments(params.index);
                    }
                  }
                },
                "评论"
              )
            ]);
          }
        }
      ],      
      addAndUpdata: {
                title:"",              //增加内容的字段
                brief: "",         //增加内容的字段
                author: "",         //增加内容的字段
                cateId:""               //增加内容的字段
            }, 
            showcom:false,
          
     
    };
  },
  methods:{
      comments(index){
          this.filter=this.list[index]._id;
            console.log( this.filter)
            this.$router.push({path:'/comment'})
            console.log(this.filter)
             this.getcommentData()
       },
  
       getcommentData() {
        this.$http({
          method: "post",
          url: `http://10.31.160.78:3000/comment/list`,
          data: this.filter
        }).then(res => {

          this.list = res.data.rows;
          console.log(this.list)
          this.total = res.data.total;
        });
      },   
  }
}
</script>
